<template>
	<view class="center-box">
		<!-- <view class="head_box">
			<yy-custom bgColor="#fff" :isBack="true">
				<block slot="backText"> </block>
				<block slot="content">备注</block>
			</yy-custom>
		</view> -->
		<view class="input-box">
			<view class="box r6 flex justify-between align-center">
				<input type="text" @input="focusInput" maxlength="15" v-model="userName" placeholder="请输入备注" />
				<view class="f24" style="color: #666666;">
					{{leng}}/15
				</view>
			</view>
			
			<view class="flex justify-center">
				<button type="default" class="cu-btn add-btn" @click="setUserId">确定</button>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			leng: 0,
			userId: '',
			userName: '',
		};
	},
	onShow() {},
	onLoad(e) {
		this.userId = e.userId
	},
	methods: {
		
		focusInput(e) {
			this.leng = e.detail.value.length
			console.log('e==>', this.leng);
		},
		
		async setUserId() {
			const res = await this.$u.post('api/user/remarks/add',{
				id: Number(this.userId),
				remarks: this.userName
			})
			this.l.msgg(res.msg)
			if (res.code == 200) {
				this.l.to('/pages/home/headInfo')
			}
			console.log('res==>', res);
		}
	}
};
</script>

<style lang="scss" scoped>
.input-box {
	padding: 30rpx;
	
	.box {
		width: 96%;
		height: 80rpx;
		margin: 0 auto;
		padding: 26rpx 31rpx;
		line-height: 80rpx;
		background-color: #f7f7f7;
	}
	
	.add-btn {
		width: 320rpx;
		height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin: 60rpx auto;
		border-radius: 40rpx;
		background-color: #000000;
	}
}
</style>
